<template>
    <div class="container">
        <div class="header">
            <img src="http://chst.vip:8081/todolist/static/media/logo.dc230d7c3cb96c91409eaedab952337e.svg" width="80" height="80" alt="">
            <div class="title">To-Do List</div>
        </div>
        <div class="from-field">
            <h1>~ 开始努力写代码了 ~</h1>
        </div>
        <inputCom @add="addTodo"></inputCom>
        <listCom :data="newData" @del="delTodo" @getFlag="filterFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"></listCom>
    </div>
</template>



<script setup>
import inputCom from "./input.vue"
import listCom from "./list.vue"
import {ref,computed} from "vue"

// 定义起始数据
let data = ref([
    {
        id:1,
        todo:'张艺兴',
        isComputed:false
    },
    {
        id:2,
        todo:"赵丽颖",
        isComputed:false
    }
])


// 添加todo
let addTodo = (input)=>{
    // 将传递来的值，新建成一个对象
    let obj = {
        id:Math.random().toString(32).substring(2),
        todo:input,
        isComputed:false
    }

    // 将对象数据推送到数组data中
    data.value.push(obj)

    localStorage.setItem('txt4',JSON.stringify(data.value))
}

// 删除todo
let delTodo = (index)=>{
    data.value.splice(index,1)
    localStorage.setItem('txt4',JSON.stringify(data.value))
}

data.value = JSON.parse(localStorage.getItem('txt4'))

// 详情按钮
let filterMsg = ref("all")
let filterFlag = (flag)=>{
    filterMsg.value = flag
    // console.log(filterMsg.value)
}

// 定义触发按钮是获取的数量
let allCount = ref(0)
let completedCount = ref(0)
let activeCount = ref(0)


// 点击按钮之后返回的数据
let newData = computed(()=>{
    // 全部按钮
    let all = data.value
    // 已完成按钮
    let completed = data.value.filter(item=>item.isComputed)
    // 未完成按钮
    let active = data.value.filter(item=>!item.isComputed)

    // 给对应的按钮赋值
    allCount.value = all.length
    completedCount.value = completed.length
    activeCount.value = active.length

    // 针对按钮触发的数据返回
    switch(filterMsg.value){
        case "all" :
            return all
        case "completed" :
            return completed
        case "active" :
            return active
    }

})
</script>






<style scoped>

  fieldset{
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
}
legend{
    display: block;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;

}
.container{
    background: #f2f2f2;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 40px 20px;
    text-align: center;
    width: 440px;
  }
.title{
  background: #ed0e7a5e;
  border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
  color: #fff;
  font-size: 21px;
  padding: 0.25em 0.8em 0.15em;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  -webkit-user-select: none;
  user-select: none;

}
.header{
  align-items: center;
  display: flex;
  justify-content: center;
}
.from-field{
  margin-top: 25px;

}
.from-field h1{
  color: #00bfff;
  font-size: 22px;
  margin-bottom: 18px;
}
</style>